import { BarChartOutlined, DotChartOutlined, ProjectOutlined } from '@ant-design/icons';
// @ts-ignore
import { openingtime } from '@/services/api';
import { BorderBox8 } from '@jiaminghi/data-view-react';
import { Statistic } from 'antd';
import { useEffect, useState } from 'react';
import CountUp from 'react-countup';
import { useImmer } from 'use-immer';
import './Number.less';

const formatter = (value: number) => <CountUp end={value} separator="," />;

const Number: React.FC = () => {
  const [options, setOptions] = useState([
    {
      name: '中药药材收录',
      value: 1893,
    },
    {
      name: '中药药方收录',
      value: 976,
      // icon: <BarChartOutlined />,
    },
    {
      name: '中药类型收录',
      value: 112,
      // icon: <ProjectOutlined />,
    },
  ]);

  useEffect(() => {
    openingtime().then((res) => {
      setOptions([...res.data]);
    });
  });

  return (
    <div className="number_height">
      <BorderBox8 color={['#396993', '#396993']}>
        <div className="value flex">
          {options.map((i, index) => (
            <div className="number_item" key={index}>
              <>
                <div className="number_item_box">
                  <div>
                    <div className="number_item_text">{i.name}</div>
                    <div className="number_item_num">
                      <Statistic
                        valueStyle={{
                          color: '#396993',
                        }}
                        // prefix={i.icon}
                        value={i.value}
                        precision={2}
                        formatter={formatter as any}
                      />
                    </div>
                  </div>
                </div>
              </>
            </div>
          ))}
        </div>
      </BorderBox8>
    </div>
  );
};
export default Number;
